<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写发布订阅者模式</title>
</head>

<body>

</body>

</html>
<script>
  let event = {
    // 存放回调函数
    list: {},
    // 订阅事件
    on: function (key, fn) {
      if (!this.list[key]) {
        this.list[key] = []
      }
      this.list[key].push(fn)
    },
    // 发布事件
    emit: function () {
      // console.log('打印list缓存列表：', this.list);
      let key = [].shift.call(arguments);
      let fns = this.list[key];

      if (!fns || fns.length === 0) {
        return false;
      }

      fns.forEach(fn => {
        fn.apply(this, arguments)
      });
    },
    // 取消订阅事件
    remove(key, fn) {
      let fns = this.list[key];
      if (!fns) return false;
      // 如果没有传对应函数名的话，就会将key值对应缓存列表中的函数都清空掉
      if (!fn) {
        fns && (fns.length = 0);
      } else {
        // 遍历缓存列表，看看传入的fn与哪个函数相同 如果相同就直接从缓存列表中删掉即可
        fns.forEach((cb, i) => {
          if (cb === fn) {
            fns.splice(i, 1);
          }
        })
      }
    }
  };

  // 订阅宠物猫上新的消息
  event.on('cat', function (catInfo) {
    // 获取宠物猫的信息
    console.log('宠物猫上新了：', catInfo);
  })

  // 订阅宠物狗上新的消息
  event.on('dog', function (dogIfo) {
    // 获取宠物狗的信息
    console.log('宠物狗上新了：', dogIfo);
  });

  // 取消订阅宠物猫的消息
  event.remove('cat')

  // 商家发布宠物猫的信息
  event.emit('cat', [
    {
      name: '卡菲猫',
      color: '黄白相间',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.go007.com%2F2016%2F05%2F16%2F46e501a217e3da43_2.jpg&refer=http%3A%2F%2Fimg.go007.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087526&t=fdd9b49017b1f12bc2292b6d54859c8e'
    },
    {
      name: '波斯猫',
      color: '雪白色',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc9fcc3cec3fdfc03c660bb43df3f8794a4c22634.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087603&t=fd71f3fe228009e739840968953ad9c6'
    },
    {
      name: '机器猫',
      color: '蓝白相间',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201507%2F29%2F20150729102106_Jhifn.thumb.224_0.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087667&t=b14864cd871b9f5a715d616216c693d3'
    }
  ]);

  // 商家发布宠物狗的信息
  event.emit('dog', [
    {
      name: '哮天犬',
      color: '黄白相间',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.go007.com%2F2016%2F05%2F16%2F46e501a217e3da43_2.jpg&refer=http%3A%2F%2Fimg.go007.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087526&t=fdd9b49017b1f12bc2292b6d54859c8e'
    },
    {
      name: '藏獒多吉',
      color: '雪白色',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc9fcc3cec3fdfc03c660bb43df3f8794a4c22634.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087603&t=fd71f3fe228009e739840968953ad9c6'
    },
    {
      name: '电子狗',
      color: '蓝白相间',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201507%2F29%2F20150729102106_Jhifn.thumb.224_0.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626087667&t=b14864cd871b9f5a715d616216c693d3'
    }
  ]);

</script>